<template>
  <div>
    <el-dialog
      title="添加啤酒种类"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="addBeerForm"
        :rules="rules"
        ref="addBeerFormRef"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="啤酒名称" prop="beerName">
                <el-input v-model="addBeerForm.beerName"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="品牌" prop="brand">
                <el-input
                  v-model="addBeerForm.brand"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="产地" prop="productionPlace">
                <el-input v-model="addBeerForm.productionPlace"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="桶规格" prop="size">
                <el-select v-model="addBeerForm.size" placeholder="请选择啤酒规格">
                  <el-option label="20 升" value=20></el-option>
                  <el-option label="30 升" value=30></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="麦芽度" prop="wort">
                <el-input v-model="addBeerForm.wort"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-form-item label="酒精度" prop="alcohol">
                <el-input v-model="addBeerForm.alcohol"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="success" @click="submitForm('addUserForm')"
            >创建</el-button
          >
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddBeer',
  data () {
    return {
      dialogVisible: false,
      addBeerForm: {
        beerName: '',
        brand: '',
        productionPlace: '',
        size: '',
        wort: '',
        alcohol: ''
      },
      rules: {
        beerName: [{ required: true, message: '啤酒种类名称不能为空！', trigger: 'change' }],
        brand: [{ required: true, message: '品牌不能为空', trigger: 'change' }],
        productionPlace: [{ required: true, message: '产地不能为空', trigger: 'change' }],
        size: [{ required: true, message: '酒桶规格不能为空', trigger: 'change' }],
        wort: [{ required: true, message: '啤酒麦芽不能为空', trigger: 'change' }],
        alcohol: [{ required: true, message: '酒精度不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 创建新用户
    // submitForm (submitForm) {
    //   this.$refs.addUserFormRef.validate(valid => {
    //     if (!valid) {
    //       return
    //     }
    //     addUser(this.addUserForm)
    //       .then(res => this.addUserSuccess(res))
    //       .catch(err => this.addUserFailed(err))
    //   })
    // },
    // 创建新用户成功回调方法
    // addUserSuccess (res) {
    //   console.log(res.data)
    //   if (res.data.code === 1) {
    //     return this.$message.error('用户名已经存在，请重试！')
    //   } else if (res.data.code === 0) {
    //     this.dialogVisible = false
    //     this.$message.success('用户添加成功！')
    //     this.$emit('getUserList')
    //   } else {
    //     this.$message.error('用户创建失败！请联系管理员！')
    //   }
    // },
    // 创建新用户失败
    // addUserFailed (err) {
    //   console.log(err)
    // },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    resetForm () {
      this.$refs.addBeerFormRef.resetFields()
    }
  }
}
</script>
